import { action9 } from "@/pages/home/createAction";
import store from "@/pages/home/store";
import { Button, Col, DatePicker, Form, Input, List, Row, Select, Steps } from "antd";
import React, { useState } from "react";
import http from "@/services/request";
import { openNotification } from "@/components/Pop";
const { Step } = Steps;
const { Option } = Select;
const { Search } = Input
export const STEPS = (props: { current: number }) => (
  <Steps current={props.current}>
    <Step title={<b>新增出库批次编号</b>} description="新增一个出库批次" />
    <Step title={<b>饲料出库</b>}  description="选择一个出库批次编号进行出库操作" />
    <Step title={<b>饲料出库记录</b>} description="选择查找出库记录" />
  </Steps>
);
//form-新增订单编号
export const NewForm = (props: any) => {
  return <List style={{ margin: "0 auto" }}>
    <Form ref={props.InNumberref} >
      <Row >
        <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 3 }}>

          <Form.Item label="出库单号"
            name="outNumber"
            rules={[{ required: true, message: '请输入出库单号' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label="出库时间"
            name="outDate"
            rules={[{ required: true, message: '请输入出库时间' }]}>
            <DatePicker />
          </Form.Item>
          <Form.Item label="批次编号"
            name="batch"
            rules={[{ required: true, message: '请输入批次编号' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label="经办人id"
            name="agentId"
            rules={[{ required: true, message: '请输入经办人id' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label="经办人姓名"
            name="agentName"
            rules={[{ required: true, message: '请输入经办人姓名' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item name="agentPhone" label="经办人电话"
            rules={[{ required: true, message: '请输入经办人电话' }]}>
            <Input></Input>
          </Form.Item>
        </Col>
        <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 3 }}>
          <Form.Item label="接收单位"
            name="receiveDept"
            rules={[{ required: true, message: '请输入接收单位' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label="接收人id"
            name="receiverId"
            rules={[{ required: true, message: '请输入接收人id' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label="接收人姓名"
            name="receiverName"
            rules={[{ required: true, message: '请输入接收人姓名' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item name="receiverPhone" label="联系方式"
            rules={[{ required: true, message: '请输入联系方式' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label="备注"
            name="remark"
            rules={[{ required: true, message: '请输入备注' }]}>
            <Input></Input>
          </Form.Item>
        </Col>
      </Row >
    </Form>
  </List>
}
//form-新增饲料出库
export const FeedForm = (props: any) => {
  return <List style={{ margin: "0 auto" }}>
    <Form ref={props.Instoreref} >
      <Row >
        <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 3 }}>

          <Form.Item label="请输入出库单号"
            name="outNumber"
            rules={[{ required: true, message: '请输入出库单号' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label="请输入饲料名称"
            name="feedName"
            rules={[{ required: true, message: '请输入饲料名称' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label="饲料编号"
            name="feedNumber"
            rules={[{ required: true, message: '请输入饲料编号' }]}>
            <Select onSelect={(value: number) => { getQuantity(props.Instoreref, value) }}>
              {props.feedOptions.map((i: number) => (
                <Option value={i} key={i} children={null}></Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item name="getdata" label="该饲料库存数量" >
            <Input disabled></Input>
          </Form.Item>


        </Col>
        <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 3 }}>

          <Form.Item label="请输入规格"
            name="specification"
            rules={[{ required: true, message: '请输入规格' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label="请输入备注"
            name="remark"
            rules={[{ required: true, message: '请输入备注' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label="请输入单价"
            name="price"
            rules={[{ required: true, message: '请输入单价' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item name="quantity" label="请输入数量"
            rules={[{ required: true, message: '请输入数量' }]}>
            <Input></Input>
          </Form.Item>
        </Col>
      </Row >
    </Form>
  </List>
}
//form-订单编号list
export const ListForm = (props: any) => {
  return <Form ref={props.listref} layout={'vertical'} style={{ minHeight: '100%', flex: 1, overflow: 'auto', width: '100%', overflowX: 'hidden' }}>
      <Row >
        <Col xs={{ span: 5, offset: 4 }} lg={{ span: 6, offset: 4 }}>

          <Form.Item label="出库单号"
            name="outNumber"
            rules={[{ required: true, message: '请输入出库单号' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label="出库时间"
            name="outDate"
            rules={[{ required: true, message: '请输入出库时间' }]}>
            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
          </Form.Item>
          <Form.Item label="经办人姓名"
            name="agentName"
            rules={[{ required: true, message: '请输入经办人姓名' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item name="agentPhone" label="经办人电话"
            rules={[{ required: true, message: '请输入经办人电话' }]}>
            <Input></Input>
          </Form.Item>
        </Col>
        <Col xs={{ span: 5, offset: 4 }} lg={{ span: 6, offset: 4 }}>
          <Form.Item label="接收单位"
            name="receiveDept"
            rules={[{ required: true, message: '请输入接收单位' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label="接收人姓名"
            name="receiverName"
            rules={[{ required: true, message: '请输入接收人姓名' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item name="receiverPhone" label="联系方式"
            rules={[{ required: true, message: '请输入联系方式' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label="备注"
            name="remark"
            rules={[{ required: true, message: '请输入备注' }]}>
            <Input></Input>
          </Form.Item>
        </Col>
      </Row >
    </Form>

}

//http请求出库编号
const postInNumber = (data: any) => {
  const { outNumber, outDate, batch, agentName, agentPhone, receiveDept, receiverName, remark ,receiverPhone} = data.current.getFieldsValue()
  http.post(`/goods/chicken/feedOutFarming/save`, {
    outNumber:Number(outNumber),
    outDate: outDate?._d,
     batch,
      agentName,
       agentPhone,
       receiveDept,
       receiverName,
       remark,
    receiverPhone
  }).then(res => {
    data.current.setFieldsValue({
      outNumber: '',
      outDate:'',
      batch:'',
      agentName:'',
      agentPhone:'',
      receiveDept:'',
      receiverName:'',
      receiverPhone:'',
      remark:''
    })
    setTimeout(() => {
      openNotification('top', '新增出库单号成功！')
    }, 0);

  }).catch(() => { return setTimeout(() => {
    openNotification('bottom', '新增失败！')
  }, 0); })

}

//http请求饲料出库
const postfeed = (data: any) => {
  const postdata = data.current.getFieldsValue();
  const { feedName,
    feedNumber,
    outNumber,
    price,
    quantity,
    remark,
    unit,
    specification, } = postdata;

  http.post(`/goods/chicken/feedOutDetailFarming/save`, {
    feedName,
    feedNumber: Number(feedNumber),
    outNumber: Number(outNumber),
    price: Number(price),
    quantity: Number(quantity),
    remark,
    unit,
    specification
  }).then(() => {
   setTimeout(() => {
     openNotification('top', '新增饲料出库成功！')
   }, 0);
    data.current.setFieldsValue({
      feedName:"",
      feedNumber:"" ,
      outNumber: "",
      price:"",
      quantity:"",
      outDate:'',
      remark:"",
      unit:"",
      specification:""
    })

  }).catch(() => {return setTimeout(() => {
    openNotification('bottom', '新增失败！')
  }, 0); })

}
// 按照出库单号搜索
export const SearchSelector = (props: any) => {

  const [searchid, setsearchid]: any = useState()
  return <div style={{ display: 'inline-block', width: '380px', marginBottom: 10, marginRight: 10 }}>
    <Select defaultValue={Options[0].label} style={{ width: 100 }}
      defaultActiveFirstOption
      onSelect={(value: string, option: any) => {
        setsearchid(option.key)
      }}
    >
      {Options.map(i =>
        (<Option value={i.label} key={i.value} children={null}></Option>))}
    </Select>
    <Search
      placeholder="请输入您要查的出库单号"
      onSearch={(e: string) => {
        // 清空输入框之后，再次搜索，出现的是初始化时候的数据
        if (e === '') {
          http.get('/server/adoptionSlaughter/list/1/10').then((res: { data: { records: any } }) => {
            props.dataSource(res.data.records)
          })
          return
        }
        switch (searchid) {
          case 'materialName': {
            http(`/server/adoptionSlaughter/fuzzyGetMaterialName/${e}`).then((res: { data: any }) => {
              props.dataSource(res.data)
            })
            break
          }
          default: {
            break
          }
        }
      }}
      style={{ width: '280px' }}
      enterButton
    />
  </div>
}
const Options = [

  { label: '出库单号', value: 'inNumber', onClick: (e: any) => { } },
]

//获取库存数量
const getQuantity = (ref: { current: { setFieldsValue: (arg0: any) => void; }; }, FeedNumber: number) => {
  http.get(`/goods/chicken/feedInfoFarming/getInventory/${FeedNumber}`).then(res => {
    ref.current.setFieldsValue({
      ...ref,
      getdata: res.data
    })

  })
}
//按钮组
export const Buttongroup = (props: any) => {

  return (
    <div style={{ marginBottom: 10, float: 'left' }}>
      <Button
        style={{
          backgroundColor: '#08c29e'
          , color: 'whitesmoke'
          , marginRight: 10
        }}
        //如果要封装还要再把函数传进去，实际没什么优化
        onClick={() => {
          //调整步骤条的位置
          props.setCurrent(0)
          store.dispatch(action9('新增订单编号')); props.setStep(store.getState().current);
          props.switchstep === '新增订单编号' && props.setCurrent(postInNumber(props.InNumberref));
        }}
      >
        新增订单编号
      </Button>
      <Button
        type="primary"
        onClick={() => {
          props.setCurrent(1)
          store.dispatch(action9('新增饲料出库'));
          props.setStep(store.getState().current);
          props.switchstep === '新增饲料出库' && postfeed(props.Instoreref);
        }}
        style={{ marginRight: 10 }}
      >
        新增饲料出库
      </Button>
      <Button
        style={{
          backgroundColor: 'red', color: 'whitesmoke', marginRight: 10
        }}
        onClick={() => {
          props.setCurrent(2)
          store.dispatch(action9('新增出库记录'));
          props.setStep(store.getState().current);
        }}
      >
        新增出库记录
      </Button>

    </div>
  )
}

//复选框的接口
export interface DataType {
  key: React.Key
  name: string
  age: number
  address: string
}
